<template>
    <div class="allDoing">
        <div class="titleList">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item @click.native="
                    () => {
                        $router.go(-1);
                    }
                " class="class_link">工作台</el-breadcrumb-item>
                <el-breadcrumb-item>全部待执行任务</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="class_search_list">
            <el-input clearable v-model="keyword" style="width: 180px;" placeholder="输入任务名称或姓名" size="small" />
            <el-select v-model="fid" placeholder="请选择" size="small">
                <el-option v-for="item in groupsList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" size="small" @click="todoSearch">搜索</el-button>
        </div>

        <div style="margin-bottom: 35px" v-for="item in taskUserList" :key="item.id">
            <div class="taskTile">
                <!-- <div class="class_taskTile_left"> -->
                <h3>{{ item.name }}</h3>
                <div>{{ item.deptName }}</div>
                <!-- </div> -->
            </div>
            <el-table :data="item.taskInfos" border style="width: 100%">
                <el-table-column type="index" label="序号" width="100" align="left" fixed="left">
                </el-table-column>
                <el-table-column prop="taskName" label="任务名称" width="400" align="left" class="taskClass">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag size="medium" :type="
                            scope.row.state == 1 ? 'danger' :
                                scope.row.state == 2 ? 'warning' :
                                    scope.row.state == 3 ? 'success' :
                                        scope.row.state == 4 ? '' :
                                            scope.row.state == 5 ? 'info' : ''">
                            {{
                                scope.row.state == 1 ? '已延期' :
                                scope.row.state == 2 ? '即将到期' :
                                    scope.row.state == 3 ? '未到期' :
                                        scope.row.state == 4 ? '暂停' :
                                            scope.row.state == 5 ? '已完成' : ''
                            }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="projectName" label="关联项目" align="left">
                </el-table-column>
                <el-table-column prop="endDate" label="截止时间" align="left">
                </el-table-column>
                <el-table-column prop="userName" label="责任人" align="left">
                </el-table-column>
                <el-table-column prop="categoryName" label="其他参与人" align="left">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { selectFunctionGroupList, executingTask } from "@/service/Api.js";
export default {
    data() {
        return {
            keyword: '',
            fid: '',
            groupsList: [],
            taskUserList: []
        }
    },
    created() {
        this.groups()
    },
    methods: {
        todoSearch() {
            this.getDataList();
        },
        //获取职能组列表
        groups() {
            let userInfo = sessionStorage.getItem("userInfo");
            let id = JSON.parse(userInfo).id;
            selectFunctionGroupList(id).then((res) => {
                if (res.code == 0) {
                    this.groupsList = res.data;
                    let f;
                    let arr = [];
                    res.data.forEach(item => {
                        arr.push(item.id);
                        f = arr.join(",")
                    })
                    let list = [
                        {
                            id: f,
                            name: "所有职能组",
                        },
                    ];
                    list.push(...res.data);
                    this.groupsList = list;
                    this.groupsList.forEach((item) => {
                        if (item.id == this.fid) {
                            this.groupName = item.name;
                        }
                    });
                    if (res.data.length > 0) {
                        let userInfo = sessionStorage.getItem("userInfo");
                        if (JSON.parse(userInfo).fid == 0) {
                            this.fid = f;
                        } else {
                            this.fid = JSON.parse(userInfo).fid;
                        }
                    }
                    this.getDataList();
                }
            });
        },
        getDataList() {
            let data = {
                fids: this.fid,
                keyword: this.keyword
            }
            executingTask(data).then(res => {
                if (res.code == 0) {
                    this.taskUserList = res.data
                }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.allDoing {
    width: 100%;
    height: 100%;
    padding: 20px;

    .titleList {
        display: flex;
        height: 40px;
        align-items: center;
        justify-content: space-between;
    }

    .class_search_list {
        display: flex;
        align-content: center;
        margin-bottom: 15px;
    }

    .taskTile {
        display: flex;
        align-items: center;
        margin: 10px 0px 0px 0px;
        padding: 0 10px;
        border: 1px solid #e8eef5;
        background: #f9f9f9;
        border-bottom: 0px;
        height: 50px;

        h3 {
            line-height: 50px;
            margin-right: 15px;
            font-size: 24px;
        }
    }
}

.taskClass {
    width: 100%;   /*一定要设置宽度，或者元素内含的百分比*/
  overflow:hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}
</style>